import { Text, View, StyleSheet, Button, Pressable, TextInput } from 'react-native';
import React, { useState, useRef, useEffect } from 'react';
import FontAwesome from 'react-native-vector-icons/FontAwesome';

interface IList {
  name: string;
  state: string | number;
  isCheck: boolean;
  disabled: boolean;
}

interface IRadiosProps {
  defaultVal: string;
  list: IList[];
  dWidth: number;
  onGetVal: (state: string | number) => void;
}

const Radios: React.FC<IRadiosProps> = ({ defaultVal, list, dWidth, onGetVal }) => {
  const [radioList, setRadioList] = useState<IList[]>(list);

  const radioClick = (item: IList, index: number) => {
    const newRadioList = radioList.map((radioItem, i) => ({
      ...radioItem,
      isCheck: i === index, // 仅将当前选中的项置为 true
    }));
    onGetVal(item.state);
    setRadioList(newRadioList); // 更新状态
  };

  useEffect(() => {
    setRadioList(list); // 当 list 变化时更新 radioList
  }, [list]);

  return (
    <View style={[styles.flexView]}>
      {/* <Text> <FontAwesome name='circle-o' size={26}></FontAwesome> <FontAwesome name='check-circle' size={26}></FontAwesome>    </Text> */}
      {radioList.map((item, index) => (
        <Pressable
          key={index}
          onPress={() => {
            radioClick(item, index);
          }}
          style={[styles.flexView, { marginRight: 10 }]}
        >
          <FontAwesome disabled={item.disabled} name={item.isCheck ? 'check-circle' : 'circle-o'} size={24} color={item.isCheck ? '#2bad38' : '#c8c9cc'} />
          <Text style={{ marginLeft: 4, fontSize: 16, color: '#000' }}>{item.name}</Text>
        </Pressable>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  flexView: {
    flexDirection: 'row',
  },
});

export default Radios;
